<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Tutorial 4 - Interpolators</title>

<script type="text/javascript" src="sh/shCore.js"></script>
<script type="text/javascript" src="sh/shBrushJScript.js"></script>
<link href="sh/shCore.css" rel="stylesheet" type="text/css" />
<link href="sh/shThemeDefault.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="../../build/caat.js"></script>


<script type="text/javascript">
     SyntaxHighlighter.all()
</script>

<style>
    div.code {
       font-size: .7em;
    }
    div.APIENTRY {
        background-color: #f0f0f0;
    }
</style>

</head>
<body style="color:black; background:#ffffff;">

<div class="section">
    <h1>Interpolators</h1>
    <p>Interpolator objects are used mainly in CAAT.Behavior objects to define the way they are applied.</p>
    <p>The default interpolator applied to any Behavior is a linear ramp, that is, the Behavior is applied in regular
    time increments.</p>
    <p>A CAAT.Interpolator object has the abbility to modify this linearity, and apply Behaviors differently, in example
    accelerating, exponentially, etc. but always taking the stablished time, and ending in the final target values set
    for the concrete behavior.</p>
    <p>In CAAT an interpolator will be an object with two methods:</p>
    <div class="APIENTRY">
        <p><b>function getContour( number-of-samples )</b></p>
        <p>This method returns an array on 'number-of-samples' objects of the form {x: float, y:float}.</p>
    </div>
    <div class="APIENTRY">
        <p><b>function getPosition( time )</b></p>
        <p>This method will return an object of the form {x: time, y: float}. The 'time' parameter will a normalized
        value between 0 and 1. This function will evaluate the Interpolator function for the parameter, which will
        normally return a value between 0 and 1.</p>
    </div>
    <p>
        The CAAT.Interpolator implementation, defines some methods of the form create&lt;SombreDescription&gt;Interpolator
        each of which creates a method which evaluates a function as time parameter modifier. These methods, among
        other possible parameters, accept at least one parameters.
    </p>
    <ul>
        <li>pingpong. A boolean value indicating whether the Interpolator function evaluates in two halves. One half
        to reach the maximum function value, and the other to get back from the maximum function value, to the minimum one.</li>
    </ul>

    <p>Here you can see the visual representation of every defined CAAT.Interpolator:</p>
    
    <div>
        <h2>Linear Interpolator</h2>
        <div>
            <table cellpadding="5">
                <tr colspan="2" align="center">Inverse= <b>false</b></tr>
                <tr>
                    <td>Pinpong=<b>false</b></td>
                    <td>Pinpong=<b>true</b></td>
                </tr>
                <tr>
                    <td><canvas id='_linear_noinverse0'></canvas></td>
                    <td><canvas id='_linear_noinverse1'></canvas></td>
                </tr>
            </table>
        </div>
        <script>
            (function() {
                var lerps= [
                        new CAAT.Interpolator().createLinearInterpolator(false, false),
                        new CAAT.Interpolator().createLinearInterpolator(true,  false)
                ];

                var i, count=0;
                for( i=0; i<lerps.length; i++) {
                    var _director_1= new CAAT.Director().initialize(
                            100,
                            100,
                            document.getElementById('_linear_noinverse'+count++));

                    var _scene_1= new CAAT.Scene().create();

                    _director_1.addScene( _scene_1 );

                    _scene_1.addChild(
                            new CAAT.InterpolatorActor().
                                create().
                                setInterpolator( lerps[i] ).
                                setBounds( 10, 10, 80, 80 ).
                                setFillStyle('#d0d0d0') );

                    _director_1.loop(1);
                }
            })();
        </script>
    </div>

    <div>
        <h2>Linear Inverse Interpolator</h2>
        <div>
            <table cellpadding="5">
                <tr colspan="2" align="center">Inverse= <b>true</b></tr>
                <tr>
                    <td>Pinpong=<b>false</b></td>
                    <td>Pinpong=<b>true</b></td>
                </tr>
                <tr>
                    <td><canvas id='_linear_inverse0'></canvas></td>
                    <td><canvas id='_linear_inverse1'></canvas></td>
                </tr>
            </table>
        </div>
        <script>
            (function() {
                var lerps= [
                        new CAAT.Interpolator().createLinearInterpolator(false, true),
                        new CAAT.Interpolator().createLinearInterpolator(true,  true)
                ];

                var i, count=0;
                for( i=0; i<lerps.length; i++) {
                    var _director_1= new CAAT.Director().initialize(
                            100,
                            100,
                            document.getElementById('_linear_inverse'+count++));

                    var _scene_1= new CAAT.Scene().create();

                    _director_1.addScene( _scene_1 );

                    _scene_1.addChild(
                            new CAAT.InterpolatorActor().
                                create().
                                setInterpolator( lerps[i] ).
                                setBounds( 10, 10, 80, 80 ).
                                setFillStyle('#d0d0d0') );

                    _director_1.loop(1);
                }
            })();
        </script>
    </div>
    <div>
        <h2>Exponential Interpolator</h2>
        <p>
            The exponential interpolator, accepts two parameters. The exponent of the Interpolator function and the
            previously described pingpong boolean value.</p>
        <div>
            <table cellpadding="5">
                <tr>
                    <td></td>
                    <td colspan="3" align="center">Pinpong=<b>false</b></td>
                </tr>
                <tr>
                    <td>Exponent</td>
                    <td>ExponentialIn</td>
                    <td>ExponentialOut</td>
                    <td>ExponentialInOut</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td><canvas id='_exp_0'></canvas></td>
                    <td><canvas id='_exp_1'></canvas></td>
                    <td><canvas id='_exp_2'></canvas></td>
                </tr>
                <tr>
                    <td>4</td>
                    <td><canvas id='_exp_6'></canvas></td>
                    <td><canvas id='_exp_7'></canvas></td>
                    <td><canvas id='_exp_8'></canvas></td>
                </tr>
                <tr>
                    <td>6</td>
                    <td><canvas id='_exp_12'></canvas></td>
                    <td><canvas id='_exp_13'></canvas></td>
                    <td><canvas id='_exp_14'></canvas></td>
                </tr>

                <tr>
                    <td></td>
                    <td colspan="3" align="center">Pinpong=<b>true</b></td>
                </tr>
                <tr>
                    <td>Exponent</td>
                    <td>ExponentialIn</td>
                    <td>ExponentialOut</td>
                    <td>ExponentialInOut</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td><canvas id='_exp_3'></canvas></td>
                    <td><canvas id='_exp_4'></canvas></td>
                    <td><canvas id='_exp_5'></canvas></td>
                </tr>
                <tr>
                    <td>4</td>
                    <td><canvas id='_exp_9'></canvas></td>
                    <td><canvas id='_exp_10'></canvas></td>
                    <td><canvas id='_exp_11'></canvas></td>
                </tr>
                <tr>
                    <td>6</td>
                    <td><canvas id='_exp_15'></canvas></td>
                    <td><canvas id='_exp_16'></canvas></td>
                    <td><canvas id='_exp_17'></canvas></td>
                </tr>

            </table>
        </div>
        <script type="text/javascript">
            (function() {

                var lerps= [
                    [
                        new CAAT.Interpolator().createExponentialInInterpolator(    2, false),
                        new CAAT.Interpolator().createExponentialOutInterpolator(   2, false),
                        new CAAT.Interpolator().createExponentialInOutInterpolator( 2, false),

                        new CAAT.Interpolator().createExponentialInInterpolator(    2, true),
                        new CAAT.Interpolator().createExponentialOutInterpolator(   2, true),
                        new CAAT.Interpolator().createExponentialInOutInterpolator( 2, true),
                    ],
                    [
                        new CAAT.Interpolator().createExponentialInInterpolator(    4, false),
                        new CAAT.Interpolator().createExponentialOutInterpolator(   4, false),
                        new CAAT.Interpolator().createExponentialInOutInterpolator( 4, false),

                        new CAAT.Interpolator().createExponentialInInterpolator(    4, true),
                        new CAAT.Interpolator().createExponentialOutInterpolator(   4, true),
                        new CAAT.Interpolator().createExponentialInOutInterpolator( 4, true),
                    ],
                    [
                        new CAAT.Interpolator().createExponentialInInterpolator(    6, false),
                        new CAAT.Interpolator().createExponentialOutInterpolator(   6, false),
                        new CAAT.Interpolator().createExponentialInOutInterpolator( 6, false),

                        new CAAT.Interpolator().createExponentialInInterpolator(    6, true),
                        new CAAT.Interpolator().createExponentialOutInterpolator(   6, true),
                        new CAAT.Interpolator().createExponentialInOutInterpolator( 6, true),
                    ]
                ];

                var i, j, count=0;
                for( j=0; j<lerps.length; j++) {
                    for( i=0; i<lerps[j].length; i++) {

                        var _director_1= new CAAT.Director().initialize(
                                100,
                                100,
                                document.getElementById('_exp_'+count++));

                        var _scene_1= new CAAT.Scene().create();

                        _director_1.addScene( _scene_1 );
                        
                        _scene_1.addChild(
                                new CAAT.InterpolatorActor().
                                    create().
                                    setInterpolator( lerps[j][i] ).
                                    setBounds( 10, 10, 80, 80 ).
                                    setFillStyle('#d0d0d0') );

                        _director_1.loop(1);
                    }
                }
            })();
        </script>
    </div>


    <div>
         <h2>Bounce Interpolator</h2>
        <div>
            <table cellpadding="5">
                <tr>
                    <td colspan="3" align="center">Pinpong=<b>false</b></td>
                </tr>
                <tr>
                    <td>BounceIn</td>
                    <td>BounceOut</td>
                    <td>BounceInOut</td>
                </tr>
                <tr>
                    <td><canvas id='_bounce_0'></canvas></td>
                    <td><canvas id='_bounce_1'></canvas></td>
                    <td><canvas id='_bounce_2'></canvas></td>
                </tr>

                <tr>
                    <td colspan="3" align="center">Pinpong=<b>true</b></td>
                </tr>
                <tr>
                    <td>BounceIn</td>
                    <td>BounceOut</td>
                    <td>BounceInOut</td>
                </tr>
                <tr>
                    <td><canvas id='_bounce_3'></canvas></td>
                    <td><canvas id='_bounce_4'></canvas></td>
                    <td><canvas id='_bounce_5'></canvas></td>
                </tr>

            </table>
        </div>
         <script>
             (function() {
                 var lerps= [
                    [
                         new CAAT.Interpolator().createBounceInInterpolator(false),
                         new CAAT.Interpolator().createBounceOutInterpolator(false),
                         new CAAT.Interpolator().createBounceInOutInterpolator(false),

                         new CAAT.Interpolator().createBounceInInterpolator(true),
                         new CAAT.Interpolator().createBounceOutInterpolator(true),
                         new CAAT.Interpolator().createBounceInOutInterpolator(true)
                    ]
                 ];

                 var i, j, count=0;
                 for( j=0; j<lerps.length; j++) {
                     for( i=0; i<lerps[j].length; i++) {

                         var _director_1= new CAAT.Director().initialize(
                                 100,
                                 100,
                                 document.getElementById('_bounce_'+count++));

                         var _scene_1= new CAAT.Scene().create();

                         _director_1.addScene( _scene_1 );

                         _scene_1.addChild(
                                 new CAAT.InterpolatorActor().
                                     create().
                                     setInterpolator( lerps[j][i] ).
                                     setBounds( 10, 10, 80, 80 ).
                                     setFillStyle('#d0d0d0') );

                         _director_1.loop(1);
                     }
                 }

             })();
         </script>
    </div>

    <div>
         <h2>Elastic Interpolator</h2>
        <div>
            <table cellpadding="5">
                <tr>
                    <td colspan="4" align="center">Pinpong=<b>false</b></td>
                </tr>
                <tr>
                    <td>Parameters</td>
                    <td>ElasticIn</td>
                    <td>ElasticOut</td>
                    <td>ElasticInOut</td>
                </tr>
                <tr>
                    <td>amp=1.1, liquid=.4</td>
                    <td><canvas id='_Elastic_0'></canvas></td>
                    <td><canvas id='_Elastic_1'></canvas></td>
                    <td><canvas id='_Elastic_2'></canvas></td>

                </tr>
                <tr>
                    <td>amp=1.0, liquid=.2</span></td>
                    <td><canvas id='_Elastic_6'></canvas></td>
                    <td><canvas id='_Elastic_7'></canvas></td>
                    <td><canvas id='_Elastic_8'></canvas></td>
                </tr>

                <tr>
                    <td colspan="4" align="center">Pinpong=<b>true</b></td>
                </tr>
                <tr>
                    <td>Parameters</td>
                    <td>ElasticIn</td>
                    <td>ElasticOut</td>
                    <td>ElasticInOut</td>
                </tr>
                <tr>
                    <td>amp=1.1, liquid=.4</td>
                    <td><canvas id='_Elastic_3'></canvas></td>
                    <td><canvas id='_Elastic_4'></canvas></td>
                    <td><canvas id='_Elastic_5'></canvas></td>
                </tr>
                <tr>
                    <td>amp=1.0, liquid=.2</td>
                    <td><canvas id='_Elastic_9'></canvas></td>
                    <td><canvas id='_Elastic_10'></canvas></td>
                    <td><canvas id='_Elastic_11'></canvas></td>
                </tr>
            </table>
        </div>
         <script>
             (function() {
                 var lerps= [
                     [
                        new CAAT.Interpolator().createElasticInInterpolator(    1.1, .4, false),
                        new CAAT.Interpolator().createElasticOutInterpolator(   1.1, .4, false),
                        new CAAT.Interpolator().createElasticInOutInterpolator( 1.1, .4, false),

                        new CAAT.Interpolator().createElasticInInterpolator(    1.1, .4, true),
                        new CAAT.Interpolator().createElasticOutInterpolator(   1.1, .4, true),
                        new CAAT.Interpolator().createElasticInOutInterpolator( 1.1, .4, true)
                     ],
                     [
                        new CAAT.Interpolator().createElasticInInterpolator(    1.0, .2, false),
                        new CAAT.Interpolator().createElasticOutInterpolator(   1.0, .2, false),
                        new CAAT.Interpolator().createElasticInOutInterpolator( 1.0, .2, false),

                        new CAAT.Interpolator().createElasticInInterpolator(    1.0, .2, true),
                        new CAAT.Interpolator().createElasticOutInterpolator(   1.0, .2, true),
                        new CAAT.Interpolator().createElasticInOutInterpolator( 1.0, .2, true)
                    ]
                 ];

                 var i, j, count=0;
                 for( j=0; j<lerps.length; j++) {
                     for( i=0; i<lerps[j].length; i++) {

                         var _director_1= new CAAT.Director().initialize(
                                 100,
                                 140,
                                 document.getElementById('_Elastic_'+count++));

                         var _scene_1= new CAAT.Scene().create();

                         _director_1.addScene( _scene_1 );

                         _scene_1.addChild(
                                 new CAAT.InterpolatorActor().
                                     create().
                                     setInterpolator( lerps[j][i] ).
                                     setBounds( 10, 30, 80, 80 ).
                                     setFillStyle('#d0d0d0') );

                         _director_1.loop(1);
                     }
                 }

             })();
         </script>
    </div>

</div>

<div class="section">
    <h2>Example</h2>
    <p>
        Here, we're going to present an array of actors. Select an Interpolator from the bottom (will show in green), and then press
        on an Actor to apply the Interpolator to. You can then see how different interpolators modify
        the Behavior aplication. Every Behavior will last for fived seconds.
    </p>
    <div><span id="interpolator_name"><code>No interpolator selected.</code></span></div>
    <div><canvas id="_sample"></canvas></div>
    <script type="text/javascript">

        (function() {
            CAAT.Dock = function() {
                CAAT.Dock.superclass.constructor.call(this);
                return this;
            };

            extend( CAAT.Dock, CAAT.ActorContainer, {

                elementsX:      0,
                elementsWidth:  0,
                minSize:        0,
                maxSize:        0,
                range:          2,

                setSizes : function( min, max ) {
                    this.minSize= min;
                    this.maxSize= max;
                    return this;
                },
                layout : function() {
                    var i, currentWidth=0, currentX=0;

                    for( i=0; i<this.getNumChildren(); i++ ) {
                        currentWidth+= this.getChildAt(i).width;
                    }

                    this.elementsX= (this.width-currentWidth)/2;
                    currentX= this.elementsX;

                    for( i=0; i<this.getNumChildren(); i++ ) {
                        var actor= this.getChildAt(i);
                        actor.x= currentX;
                        currentX+= actor.width;
                        actor.y= this.maxSize- actor.height;
                    }

                    this.elementsWidth= currentWidth;
                },
                mouseMove : function(mouseEvent) {
                    this.actorNotPointed();
                },
                actorNotPointed : function() {
                    var i;

                    for( i=0; i<this.getNumChildren(); i++ ) {
                        var actor= this.getChildAt(i);
                        actor.width= this.minSize;
                        actor.height= actor.width;
                    }

                    this.layout();

                    document.getElementById('interpolator_name').innerHTML='<code>No interpolator selected.</code>';
                },
                actorPointed : function(x, pointedActor) {

                    var index= this.findChild(pointedActor);

                    var across= x / pointedActor.width;
                    var i;

                    for( i=0; i<this.childrenList.length; i++ ) {
                        var actor= this.childrenList[i];

                        if (i < index - this.range || i > index + this.range) {
                            actor.width = this.minSize;
                        } else if (i == index) {
                            actor.width = this.maxSize;
                        } else if (i < index) {
                            actor.width=
                                this.minSize + Math.round(
                                            (this.maxSize - this.minSize - 1)
                                                    * (Math.cos((i - index - across + 1) / this.range * Math.PI) + 1)
                                                    / 2);
                        } else {
                            actor.width=
                                    this.minSize + Math.round(
                                            (this.maxSize - this.minSize - 1)
                                                    * (Math.cos( (i - index - across) / this.range * Math.PI) + 1)
                                                    / 2);

                        }
                        actor.height= actor.width;
                    }

                    this.layout();
                }
            });
        })();


        (function() {
            var director= new CAAT.Director().initialize(
                    680,
                    600,
                    document.getElementById('_sample'));

            var scene= new CAAT.Scene().create();

            director.addScene(scene);

            var lerps=[
                new CAAT.Interpolator().createLinearInterpolator(false, false), 'Linear pingpong=false, inverse=false',
                new CAAT.Interpolator().createLinearInterpolator(true,  false), 'Linear pingpong=true, inverse=false',

                new CAAT.Interpolator().createLinearInterpolator(false, true), 'Linear pingpong=false, inverse=true',
                new CAAT.Interpolator().createLinearInterpolator(true,  true), 'Linear pingpong=true, inverse=true',

                    new CAAT.Interpolator().createExponentialInInterpolator(    2, false), 'ExponentialIn pingpong=false, exponent=2',
                    new CAAT.Interpolator().createExponentialOutInterpolator(   2, false), 'ExponentialOut pingpong=false, exponent=2',
                    new CAAT.Interpolator().createExponentialInOutInterpolator( 2, false), 'ExponentialInOut pingpong=false, exponent=2',
                    new CAAT.Interpolator().createExponentialInInterpolator(    2, true), 'ExponentialIn pingpong=true, exponent=2',
                    new CAAT.Interpolator().createExponentialOutInterpolator(   2, true), 'ExponentialOut pingpong=true, exponent=2',
                    new CAAT.Interpolator().createExponentialInOutInterpolator( 2, true), 'ExponentialInOut pingpong=true, exponent=2',

                    new CAAT.Interpolator().createExponentialInInterpolator(    4, false), 'ExponentialIn pingpong=false, exponent=4',
                    new CAAT.Interpolator().createExponentialOutInterpolator(   4, false), 'ExponentialOut pingpong=false, exponent=4',
                    new CAAT.Interpolator().createExponentialInOutInterpolator( 4, false), 'ExponentialInOut pingpong=false, exponent=4',
                    new CAAT.Interpolator().createExponentialInInterpolator(    4, true), 'ExponentialIn pingpong=true, exponent=4',
                    new CAAT.Interpolator().createExponentialOutInterpolator(   4, true), 'ExponentialOut pingpong=true, exponent=4',
                    new CAAT.Interpolator().createExponentialInOutInterpolator( 4, true), 'ExponentialInOut pingpong=true, exponent=4',

                    new CAAT.Interpolator().createExponentialInInterpolator(    6, false), 'ExponentialIn pingpong=false, exponent=6',
                    new CAAT.Interpolator().createExponentialOutInterpolator(   6, false), 'ExponentialOut pingpong=false, exponent=6',
                    new CAAT.Interpolator().createExponentialInOutInterpolator( 6, false), 'ExponentialInOut pingpong=false, exponent=6',
                    new CAAT.Interpolator().createExponentialInInterpolator(    6, true), 'ExponentialIn pingpong=true, exponent=6',
                    new CAAT.Interpolator().createExponentialOutInterpolator(   6, true), 'ExponentialOut pingpong=true, exponent=6',
                    new CAAT.Interpolator().createExponentialInOutInterpolator( 6, true), 'ExponentialInOut pingpong=true, exponent=6',

                new CAAT.Interpolator().createBounceInInterpolator(false), 'BounceIn pingpong=false',
                new CAAT.Interpolator().createBounceOutInterpolator(false), 'BounceOut pingpong=false',
                new CAAT.Interpolator().createBounceInOutInterpolator(false), 'BounceInOut pingpong=false',
                new CAAT.Interpolator().createBounceInInterpolator(true), 'BounceIn pingpong=true',
                new CAAT.Interpolator().createBounceOutInterpolator(true), 'BounceOut pingpong=true',
                new CAAT.Interpolator().createBounceInOutInterpolator(true), 'BounceInOut pingpong=true',

                    new CAAT.Interpolator().createElasticInInterpolator(    1.1, .4, false), 'ElasticIn pingpong=false, amp=1.1, d=.4',
                    new CAAT.Interpolator().createElasticOutInterpolator(   1.1, .4, false), 'ElasticOut pingpong=false, amp=1.1, d=.4',
                    new CAAT.Interpolator().createElasticInOutInterpolator( 1.1, .4, false), 'ElasticInOut pingpong=false, amp=1.1, d=.4',
                    new CAAT.Interpolator().createElasticInInterpolator(    1.1, .4, true), 'ElasticIn pingpong=true, amp=1.1, d=.4',
                    new CAAT.Interpolator().createElasticOutInterpolator(   1.1, .4, true), 'ElasticOut pingpong=true, amp=1.1, d=.4',
                    new CAAT.Interpolator().createElasticInOutInterpolator( 1.1, .4, true), 'ElasticInOut pingpong=true, amp=1.1, d=.4',

                    new CAAT.Interpolator().createElasticInInterpolator(    1.0, .2, false), 'ElasticIn pingpong=false, amp=1.0, d=.2',
                    new CAAT.Interpolator().createElasticOutInterpolator(   1.0, .2, false), 'ElasticOut pingpong=false, amp=1.0, d=.2',
                    new CAAT.Interpolator().createElasticInOutInterpolator( 1.0, .2, false), 'ElasticInOut pingpong=false, amp=1.0, d=.2',
                    new CAAT.Interpolator().createElasticInInterpolator(    1.0, .2, true), 'ElasticIn pingpong=true, amp=1.0, d=.2',
                    new CAAT.Interpolator().createElasticOutInterpolator(   1.0, .2, true), 'ElasticOut pingpong=true, amp=1.0, d=.2',
                    new CAAT.Interpolator().createElasticInOutInterpolator( 1.0, .2, true), 'ElasticInOut pingpong=true, amp=1.0, d=.2',
            ];

            var cols= 20;
            var j=0, i=0;
            var rows= lerps.length/2/cols;
            var min= 25;
            var max= 80;
            var selectedInterpolatorActor= null;

            // generate interpolator actors.
            for( j=0; j<rows; j++ ) {

                var root= new CAAT.Dock().
                        create().
                        setBounds(0,director.canvas.height-(j+1)*max, director.canvas.width, max).
                        setSizes(min, max);

                scene.addChild(root);

                for( i=0; i<cols; i++ ) {

                    if ( j*cols+i>=lerps.length ) {
                        break;
                    }

                    var actor= new CAAT.InterpolatorActor().
                         create().
                         setInterpolator( lerps[(j*cols+i)*2] ).
                         setBounds( 0, 0, min, min );
                    actor.name= lerps[(j*cols+i)*2 +1];

                    actor.mouseMove= function(mouseEvent) {
                        document.getElementById('interpolator_name').innerHTML= '<code>'+mouseEvent.source.name+'</code>';
                        mouseEvent.source.parent.actorPointed( mouseEvent.point.x, mouseEvent.source );
                    }
                    actor.mouseExit= function(mouseEvent) {
                        if ( mouseEvent.source!=selectedInterpolatorActor ) {
                            mouseEvent.source.setFillStyle(null);
                        }
                    }
                    actor.mouseEnter= function(mouseEvent) {
                        if ( mouseEvent.source!=selectedInterpolatorActor ) {
                            mouseEvent.source.setFillStyle('#f0f0f0');
                        }
                    }
                    actor.mouseClick= function(mouseEvent) {
                        if ( null!=selectedInterpolatorActor ) {
                            selectedInterpolatorActor.setFillStyle(null);
                        }
                        selectedInterpolatorActor= mouseEvent.source;
                        mouseEvent.source.setFillStyle('#00ff00');
                        selectedInterpolatorActor= mouseEvent.source;
                    }

                    root.addChild( actor );
                }

                root.layout();
            }

            // generate actors to apply interpolators to

            for( i=0; i<3; i++ ) {
                var _text_r0= new CAAT.TextActor().
                        create().
                        setFont("50px sans-serif").
                        setText("CAAT").
                        setFillStyle('green').
                        setOutline(true).
                        setOutlineColor('red').
                        setLocation( 30,60+140*i );
                var text_r0_rb= new CAAT.RotateBehavior().
                        setFrameTime(0,5000).
                        setAngles(0,Math.PI*2).
                        setCycle(true);
                _text_r0.addBehavior( text_r0_rb );
                _text_r0.mouseClick = function(mouseEvent) {
                    if ( null!=selectedInterpolatorActor ) {
                        mouseEvent.source.behaviorList[0].setInterpolator( selectedInterpolatorActor.getInterpolator() );
                    }
                };
                scene.addChild( _text_r0 );
            }

            for( i=0; i<3; i++ ) {
                var _text_r0= new CAAT.TextActor().
                        create().
                        setFont("50px sans-serif").
                        setText("CAAT").
                        setFillStyle('green').
                        setOutline(true).
                        setOutlineColor('red').
                        setLocation( 250,60+140*i );
                var text_r0_rb= new CAAT.ScaleBehavior().
                        setFrameTime(0,5000).
                        setValues(1, 2, 1, 2).
                        setCycle(true);
                _text_r0.addBehavior( text_r0_rb );
                _text_r0.mouseClick = function(mouseEvent) {
                    if ( null!=selectedInterpolatorActor ) {
                        mouseEvent.source.behaviorList[0].setInterpolator( selectedInterpolatorActor.getInterpolator() );
                    }
                };
                scene.addChild( _text_r0 );
            }

            for( i=0; i<3; i++ ) {
                var _text_r0= new CAAT.ShapeActor().
                        create().
                        setShape( CAAT.ShapeActor.prototype.SHAPE_CIRCLE ).
                        setFillStyle('pink').
                        setStrokeStyle('orange').
                        setBounds( 500,60+130*i, 80, 80 );
                var text_r0_rb= new CAAT.AlphaBehavior().
                        setFrameTime(0,5000).
                        setValues(0, 1).
                        setCycle(true);
                _text_r0.addBehavior( text_r0_rb );
                _text_r0.mouseClick = function(mouseEvent) {
                    if ( null!=selectedInterpolatorActor ) {
                        mouseEvent.source.behaviorList[0].setInterpolator( selectedInterpolatorActor.getInterpolator() );
                    }
                };
                scene.addChild( _text_r0 );
            }


            director.loop(60);
        })();
    </script>
</div>

</body>
</html>